<template>
	<view id="time_limited_task">
		<image class="head_img" src="@/static/index/time-limited-task/task_head.png" mode="widthFix"></image>
		<view class="back_box" @click="backHome">
			<image src="@/static/index/time-limited-task/back.png" mode=""></image>
			<text>返回</text>
		</view>
		<view class="main">
			<block v-for="(item,index) in dataList" :key="index">
				<view class="list_box button" @click="jumpTask(item)">
					<view class="list_box_head">
						<image src="@/static/index/time-limited-task/xianshidk.png" v-if="item.type==1" mode="widthFix"></image>
						<image src="@/static/index/time-limited-task/xianshihc.png" v-if="item.type==2" mode="widthFix"></image>
						<image src="@/static/index/time-limited-task/xianshixh.png" v-if="item.type==3" mode="widthFix"></image>
						<block v-if="item.status!=4">
							<count-down :starTime="item.h5StartTime" @endSuccess="endSuccess" v-if="item.status==2"></count-down>
							<count-down :starTime="item.h5EndTime" @endSuccess="endSuccess" v-if="item.status==3"></count-down>
							<view class="start_txt" v-if="item.status==2">开始</view>
							<view class="start_txt" v-if="item.status==3">结束</view>
						</block>
					</view>
					<view class="list_box_detail">
						<image class="list_box_detail_l" src="@/static/index/time-limited-task/task_icon.png" v-if="item.type==1" mode=""></image>
						<image class="list_box_detail_l" src="@/static/index/time-limited-task/task_icon_two.png" v-if="item.type==2" mode=""></image>
						<image class="list_box_detail_l" src="@/static/index/time-limited-task/task_icon_three.png" v-if="item.type==3" mode=""></image>
						<view class="list_box_detail_r">
							<view class="task_name ellipseHide">{{item.name}}</view>
							<view class="task_num ellipseHide" v-if="item.awardLogicType==1||item.awardLogicType==2">奖池数量：{{item.jackpotAmount}}{{item.awardTypeDict}}</view>
							<view class="task_num" v-if="item.awardLogicType==3">
								<block v-if="item.returnRatio!=0">
									<text>当前奖励：返还</text>
									<text>{{item.returnRatio}}%</text>
									<text>打卡金额的</text>
									<text v-if="item.awardType==1">通分</text>
									<text v-if="item.awardType==2">CoCo</text>
									<text v-if="item.awardType==3">现金</text>
								</block>
								<block v-if="item.returnRatio==0">
									<view class="task_num">活动名额已耗尽</view>
								</block>
							</view>
							<view class="list_box_detail_r_b">
								<view class="" v-if="item.awardLogicType==1||item.awardLogicType==2">
									<text>我的排行：</text>
									<text v-if="item.rank!=0">{{item.rank}}</text>
									<text v-if="token==''||item.rank==0">暂无 ></text>
								</view>
								<view class=""> </view>
								<!-- <view class="" v-if="item.awardLogicType==3">参与人数：{{item.involveNum}}人</view> -->
								<view class="status_box" v-if="item.status==2">待开始</view>
								<view class="status_box status2" v-if="item.status==3">进行中</view>
								<view class="status_box status3" v-if="item.status==4">已结束</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		taskList,
	} from '@/api/timeLimitedTask.js'
	export default {
		data() {
			return {
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				dataList: [], //列表
				token:'',
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			this.getList()
		},
		methods: {
			backHome(){ //返回首页
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			endSuccess(){ //倒计时结束
				console.log('结束')
				this.pageNum = 1
				this.getList()
			},
			jumpTask(item){ //跳转任务排行
				if(item.type==1){
					uni.navigateTo({
						url:'/pages/index/time-limited-task/task-ranking/task-ranking?id=' + item.id + '&awardLogicType=' + item.awardLogicType
					})
				}else{
					uni.navigateTo({
						url:'./task-ranking-hc-xh/task-ranking-hc-xh?id=' + item.id + '&type=' + item.type
					})
				}
			},
			async getList() { //获取平台订单列表
				uni.showLoading({
					title: '加载中'
				})
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				try {
					const res = await taskList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},　
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
		
			} else {
				this.pageNum++; //每触底一次 page + 1;
				this.getList()
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
	#time_limited_task{
		background-color: #F7D28E;
		min-height: 100%;
	}
	view{
		box-sizing: border-box;
	}
	.head_img{
		width: 100%;
	}
	.back_box{
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #FFFFFF;
		color: #FFFFFF;
		border-radius: 100rpx;
		width: 108rpx;
		height: 44rpx;
		font-size: 24rpx;
		position: absolute;
		left: 22rpx;
		top: 26rpx;
	}
	.back_box image{
		width: 12rpx;
		height: 18rpx;
		margin-right: 6rpx;
	}
	.main{
		padding: 0 20rpx 100rpx;
		margin-top: -30rpx;
		position: relative;
		z-index: 2;
	}
	.list_box{
		margin-bottom: 20rpx;
	}
	.list_box_head{
		padding: 22rpx 20rpx;
		display: flex;
		align-items: center;
		background-color: #FFEEAA;
		border-radius: 12rpx 12rpx 0 0;
	}
	.list_box_head image{
		width: 148rpx;
		margin-right: 24rpx;
	}
	.time_box{
		width: 38rpx;
		height: 38rpx;
		border-radius: 6rpx;
		background: #A67517;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 38rpx;
		margin-right: 10rpx;
	}
	.time_txt{
		font-size: 24rpx;
		color: #A67517;
		margin-right: 10rpx;
	}
	.start_txt{
		font-size: 28rpx;
		color: #A67517;
	}
	.list_box_detail{
		background-color: #FFFFFF;
		padding: 30rpx 0 30rpx 20rpx;
		display: flex;
		align-items: center;
		border-radius: 0 0 12rpx 12rpx;
	}
	.list_box_detail_l{
		width: 154rpx;
		height: 154rpx;
		margin-right: 24rpx;
	}
	.list_box_detail_r{
		flex: 1;
	}
	.task_name{
		font-size: 30rpx;
		color: #222222;
		font-weight: bold;
		width: 488rpx;
	}
	.task_num{
		font-size: 28rpx;
		color: #222222;
		margin: 16rpx 0 10rpx;
		width: 488rpx;
	}
	.list_box_detail_r_b{
		font-size: 28rpx;
		color: #222222;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.status_box{
		width: 120rpx;
		height: 44rpx;
		font-size: 24rpx;
		color: #FFF2D0;
		text-align: center;
		line-height: 44rpx;
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		background-color: #FFD564;
		/* margin-right: -2rpx; */
	}
	.status2{
		background-color: #EC6032;
	}
	.status3{
		background-color: #BABABA;
		color: #FFFFFF;
	}
</style>
